import React, { useEffect, useState } from 'react';
import { useLocation, useParams, useNavigate } from "react-router-dom";
import { Button, Space, Card, Descriptions } from 'antd';
import { getHospitalShowById } from "@/api/hosp";
import { useAppDispatch } from "@/hooks";
import { upItems, delItemsByIndex, useSelectorCommon } from "@/store/slices/common";

function Index() {
    const { id } = useParams();
    const dispatch = useAppDispatch();
    const { pathname } = useLocation();
    const { items } = useSelectorCommon();
    const navigate = useNavigate();

    const [info, setInfo] = useState<any>({
        hospital: {
            param: {}
        },
        bookingRule: {
            rule: []
        }
    });

    useEffect(() => {
        getHospitalShowById(id as string).then(value => {
            // console.log(value.data.hospital.hosname);
            setInfo(value.data);
            dispatch(upItems({
                key: pathname,
                label: value.data.hospital.hosname + "详情"
            }))
        })
    }, [])
    return (
        <div id={"content"}>
            <Space direction={"vertical"}>
                <Button onClick={() => {
                    const index = items.findIndex((v: any) => v.key === pathname);
                    dispatch(delItemsByIndex(index));
                    // navigate(items[index-1].key);// 返回的是左侧的标签页
                    navigate("/hospital/hospitalList")
                }} danger type={"primary"}>关闭返回</Button>

                <Card>
                    <Descriptions column={2} title="医院基本信息" bordered>
                        <Descriptions.Item label="医院名称">{info.hospital.hosname}</Descriptions.Item>
                        <Descriptions.Item label="医院LOGO">
                            {
                                info.hospital.logoData && <img height={100} src={"data:image/png;base64," + info.hospital.logoData} alt="" />
                            }
                        </Descriptions.Item>
                        <Descriptions.Item label="医院编码">{info.hospital.hoscode}</Descriptions.Item>
                        <Descriptions.Item label="医院地址">{info.hospital.param.fullAddress}</Descriptions.Item>
                        <Descriptions.Item label="乘车路线" span={2}>
                            {info.hospital.route}
                        </Descriptions.Item>
                        <Descriptions.Item label="医院简介" span={2}>
                            {info.hospital.intro}
                        </Descriptions.Item>
                    </Descriptions>
                </Card>


                <Card>
                    <Descriptions column={2} title="医院预约规则信息" bordered>
                        <Descriptions.Item label="预约周期">{info.bookingRule.cycle}</Descriptions.Item>
                        <Descriptions.Item label="放号时间">{info.bookingRule.releaseTime}</Descriptions.Item>
                        <Descriptions.Item label="停号时间">{info.bookingRule.stopTime}</Descriptions.Item>
                        <Descriptions.Item label="退号时间">{info.bookingRule.quitTime}</Descriptions.Item>
                        <Descriptions.Item label="预约规则" span={2}>
                            {info.bookingRule.rule.map((v: string, index: number) => (
                                <p key={index}>{v}</p>
                            ))}
                        </Descriptions.Item>
                    </Descriptions>
                </Card>
            </Space>
        </div>
    );
}

export default Index;